<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户反馈</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/vendors/iconly/bold.css">
    <link rel="stylesheet" href="/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" href="/vendors/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/antd-layout.css">
    <script src="/js/common.js"></script>
    <script src="/js/vue.2.6.4.min.js"></script>
    <script src='/js/jquery.3.6.0.min.js'></script>
    <style>
        /* Element UI 风格表格 */
        .element-table {
            background: #ffffff;
            border: 1px solid #ebeef5;
            border-radius: 0;
            overflow: hidden;
            margin: 0 -1.5rem;
            border-left: none;
            border-right: none;
        }

        .element-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .element-table thead th {
            background: #f5f7fa;
            color: #909399;
            font-weight: 500;
            text-align: center;
            padding: 12px 10px;
            font-size: 14px;
            border-bottom: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
        }

        .element-table thead th:last-child {
            border-right: none;
        }

        .element-table tbody td {
            padding: 12px 10px;
            border-bottom: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            color: #606266;
            font-size: 14px;
            text-align: center;
        }

        .element-table tbody td:last-child {
            border-right: none;
        }

        .element-table tbody tr {
            transition: background-color 0.25s ease;
        }

        .element-table tbody tr:hover {
            background: #f5f7fa;
        }

        .element-table tbody tr:nth-child(even) {
            background: #fafafa;
        }

        .element-table tbody tr:nth-child(even):hover {
            background: #f5f7fa;
        }

        .element-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Element UI 风格按钮 */
        .el-btn-text {
            display: inline-block;
            padding: 5px 15px;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            margin-right: 8px;
            border: 1px solid;
        }

        .el-btn-text:last-child {
            margin-right: 0;
        }

        .el-btn-text:hover {
            text-decoration: none;
        }

        .el-btn-success {
            color: #67c23a;
            border-color: #c2e7b0;
            background: #f0f9ff;
        }

        .el-btn-success:hover {
            color: #85ce61;
            border-color: #67c23a;
            background: #e1f3d8;
        }

        .action-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="nav-bar-container"></div>

    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>

        <div class="page-heading">
            <section class="section">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">用户反馈</h5>
                                <a href="#" class="btn btn-primary" data-bs-toggle="modal"
                                   data-bs-target="#inlineForm" @click="beginAdd()">
                                    <i class="bi bi-plus-lg me-1"></i>新增
                                </a>
                            </div>
                            <div class="card-body">
                                <!-- Table with outer spacing -->
                                <div class="table-responsive element-table">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>用户ID</th>
                                            <th>标题</th>
                                            <th>内容</th>
                                            <th>时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="item in resList">
                                            <td>{{item.id}}</td>
                                            <td>{{item.userId}}</td>
                                            <td>{{item.title}}</td>
                                            <td>{{item.content}}</td>
                                            <td>{{formatDate(item.createTime)}}</td>
                                            <td>
                                                <div class="action-buttons">
                                                    <a href="#" class="el-btn-text el-btn-success"
                                                       @click="handleFeedback(item.id)">处理</a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <nav aria-label="Page navigation example">
                                    <ul class="pagination pagination-primary">
                                        <li class="page-item" @click="goBegin()">
                                            <a class="page-link">
                                                <span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
                                            </a>

                                        </li>
                                        <li :class="item == qry.current?'page-item active':'page-item'"
                                            v-for="item in pageNums" @click="changeNum(item)">
                                            <a class="page-link">
                                                {{item}}
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link">
                                                 <span aria-hidden="true" @click="goEnd()"><i
                                                         class="bi bi-chevron-right"></i></span>
                                            </a>

                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<script src="/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/nav-bar.js"></script>
<script src="/js/main.js"></script>
</body>

</html>
<script type="text/javascript">
    jQuery(document).ready(function () {
        var mainVue = new Vue({
            el: `#main`,
            data: {
                userInfo: {userName: '', token: '', imageHeadUrl: ''},
                resList: [],
                qry: {
                    current: 1,
                    pageSize: 20,
                    examBankId: 0
                },
                examBankId: 0,
                pageNums: [1, 2, 3]
            },
            methods: {
                'init': function () {
                    var examBankId = localStorage.getItem("examBankId");
                    if (examBankId) {
                        this.qry.examBankId = examBankId;
                        this.examBankId = examBankId;
                    }
                    var thisVue = this;
                    var localUserInfo = localStorage.getItem("userInfo");
                    if (localUserInfo) {
                        thisVue.$set(thisVue, 'userInfo', JSON.parse(localUserInfo));
                    }
                    this.getResList();
                },
                'handleFeedback': function (id) {
                    var thisVue = this;
                    if (confirm("确定已处理？")) {
                        $.ajax({
                            type: 'post',
                            contentType: "application/json",
                            dataType: "json",
                            url: '/common/handleFeedback',
                            data: JSON.stringify({id: id}),
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                            },
                            cache: false
                        }).done(function (data) {
                            if (data.success) {
                                thisVue.getResList()
                            } else {
                                alert(data.errMessage);
                                if (data.timeOut) {
                                    window.location.href = "/view/userLogin";
                                }
                            }
                        });
                    }
                },
                'getResList': function () {
                    var thisVue = this;
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: '/common/getFeedbackList',
                        data: JSON.stringify(thisVue.qry),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.resList = data.data;
                            thisVue.qry.pageEnd = Math.ceil(data.total / thisVue.qry.pageSize);
                            thisVue.qry.total = data.total;
                            thisVue.rebuildPage();
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'rebuildPage': function () {
                    var pageNums = [];
                    var begin = this.qry.current - 3;
                    var end = this.qry.current + 3;
                    if (begin < 1) {
                        begin = 1;
                    }
                    if (end > this.qry.pageEnd) {
                        end = this.qry.pageEnd;
                    }
                    for (var i = begin; i <= end; i++) {
                        pageNums.push(i);
                    }
                    this.pageNums = pageNums;
                },
                'changeNum': function (item) {
                    this.qry.current = item;
                    this.getResList();
                },
                'goBegin': function () {
                    this.qry.current = this.qry.pageBegin;
                    this.getResList();
                },
                'goEnd': function () {
                    this.qry.current = this.qry.pageEnd;
                    this.getResList();
                },
                'formatDate':function (input){
                    return formatDateFull(input);
                }
            }
        });
        mainVue.init();
    });
</script>
